<template>
  <view class="page container">
    <view class="pt-28 pb-28 bgc-f7f8fa">
      <view class="pad-28 bgc-fff flex-between-center">
        <view class="flex-column-center">
          <u-avatar :src="userInfo.avatar" size="120rpx"></u-avatar>
          <text class="fs-36 fw-500 ml-20">{{ userInfo.nickname }}</text>
        </view>
        <view class="w-124 h-56 br-8 c-c5261d btn-active fs-24 fw-500 flex-center-center"
          style="border: 1px solid #c5261d" @click="$utils.to('/pages2/my/responsible_area')">负责区域</view>
      </view>
    </view>
    <view>
      <u-tabs :list="tabsList" @click="tabClick" lineColor="#C5261D"
        :activeStyle="{ fontWeight: 500, color: '#000' }"></u-tabs>
      <view class="h-1 bgc-f7f8fa mt-10"></view>
      <view class="pl-28 pr-28">
        <z-paging :use-page-scroll="true" :refresher-enabled="false" :default-page-size="10" ref="pagingRef"
          v-model="dataList" @query="queryList">
          <view class="pt-28" v-for="(item, index) in dataList" :key="index">
            <charge-store-card :info="item" @reload="reload" />
          </view>
        </z-paging>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
import ChargeStoreCard from "../components/ChargeStoreCard";
import { xhManageYanShopListApi, xhManageYanShopAuditApi } from "@/services/my";
export default {
  components: {
    ChargeStoreCard,
  },
  data() {
    return {
      dataList: [],
      tabsList: [
        {
          name: "全部",
          value: 'all',
        },
        {
          name: "待审核",
          value: '0',
        },
        {
          name: "已入驻",
          value: '1',
        },
        {
          name: "已驳回",
          value: '2',
        },
      ],
      params: {
        status: 'all',
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  //触底加载
  onReachBottom() {
    this.$refs.pagingRef?.doLoadMore();
  },
  methods: {
    reload() {
      this.$refs.pagingRef?.reload();
    },
    tabClick(e) {
      this.params.status = e.value;
      this.$refs.pagingRef?.reload();
    },
    queryList(page, size) {
      xhManageYanShopListApi({
        page,
        page_size: size,
        status: this.params.status == 'all' ? '' : this.params.status,
      }).then((res) => {
        this.$refs.pagingRef?.complete(res.data?.data || []);
      });
    },
  },
};
</script>
